import React, { useState, useEffect } from "react";
import Taro, { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { fetchMyPrize, fakeReceivePrize } from '@/server/order'
import { backgroundObj, loginData } from '@/utils/utils'
import "./index.scss";
const PrizeList = (props) => {
  const { params } = getCurrentInstance().router
  const { status = '' } = params
  const { organizationId = '1' } = loginData() || {}
  const [list, setList] = useState([])
  const [visible, setVisible] = useState(true)
  const [page, setPage] = useState({
    page: 1,
    limit: 10
  })
  const fetchData = () => {
    fetchMyPrize({ organizationId, ...page, status: activeKey }).then(val => {
      const { prizeUserList = [] } = val
      setList([...list, ...prizeUserList])
    })
  }
  useReachBottom(() => {
    setPage({
      ...page,
      page: page.page + 1
    })
  })
  const fakePrize = (data) => {
    const { id } = data
    fakeReceivePrize({ id, organizationId }).then(val => {
      setList(list.map(item => {
        if (item.id === id) {
          return {
            ...item,
            status: '1'
          }
        } else {
          return {
            ...item
          }
        }
      }))
    })
  }
  const [hasMore, setHasMore] = useState(true)
  const [activeKey, setActiveKey] = useState(status)
  const [tabs, setTabs] = useState([{
    title: '全部',
    key: ''
  }, {
    title: '未领取',
    key: '0'
  },])
  useEffect(() => {
    fetchData()
  }, [page])

  const PrizeCard = (props) => {
    const { data } = props
    const { status, goodsCover, goodsName, createTime } = data
    return (
      <View className="prizeCard_box">
        <View className="prizeCard_profile" style={backgroundObj(goodsCover)}></View>
        <View className="prizeCard_content">
          <View className="prizeCard_title font_hide">{goodsName}</View>
          <View className="prizeCard_time">{createTime}</View>
          {status === '0' ?
            <View className="prizeCard_button" onClick={() => {
              Taro.showModal({
                title: "确认领取",
                confirmText: "确定",
                content: "确认是否领取奖品",
                success: function (res) {
                  if (res.confirm) {
                    // 更新
                    fakePrize(data)
                  }
                },
              });

            }}>未领取</View> :
            status === '1' ?
              <View className="prizeCard_button prizeCard_tm">已领取</View> :
              <View className="prizeCard_opcity">已过期</View>}
        </View>
      </View>)
  }
  return (
    <View className="prizeList_box">
      {visible && <View className="prizeList_rule_info">请在中奖后15天内领取奖品，过期无法兑奖
        {/* <AtIcon className="prizeList_rule_close" value='close' onClick={() => setVisible(false)}></AtIcon> */}
      </View>}
      <View className="prizeList_list_box">
        {list.map((item, index) => {
          return <PrizeCard data={item} key={index}></PrizeCard>
        })}
      </View>
    </View>
  );
};
export default PrizeList
